(function (args) {
    Vue.use(httpVueLoader);


    var $this = $("#gray-config-container");
    //编辑状态
    var editStatus = {
        serviceInfo: false,
        envInfo: false,
        limit: false,
        flowParams: false
    };

    //成果管理更新树节点名称
    var updataItem = {};

    var $that = $this;

    //是否有权限启用灰度服务
    var flagSync1 = true;
    var flagSync2 = true;

    var flagGray = true;

    if(flagChengGuo == "false"){
        flagGray = false;
    }

    //请求参数
    var REQUEST_PARAMETERS_GRAY = [
        {
            name: "App-Key",
            desc: TempoUtils.locale("mine.appkey_description")
        },
        {
            name: "App-Token",
            desc: TempoUtils.locale("mine.appsecret_description")
        },
        {
            name: "serviceId",
            desc: TempoUtils.locale("mine.fwid")
        },
        {
            name: "method",
            desc: TempoUtils.locale("mine.methoddescription")
        },
        {
            name: "eid",
            desc: TempoUtils.locale("mine.eiddescription")
        },
        {
            name: "data",
            desc: TempoUtils.locale("mine.request_data")
        },
        {
            name: "flowParams",
            desc: TempoUtils.locale("mine.request_flowparams")
        }
    ];

    //相应参数
    var RESPONSE_PARAMETERS = [
        {
            name: "status",
            desc: TempoUtils.locale("mine.statusdescription")
        },
        {
            name: "message",
            desc: TempoUtils.locale("mine.errordescription")
        },
        {
            name: "code",
            desc: TempoUtils.locale("mine.codedescription")
        },
        {
            name: "eid",
            desc: TempoUtils.locale("mine.eidreturndesc")
        },
        {
            name: "data",
            desc: TempoUtils.locale("mine.response_data")
        }
    ];

    var $appConfig = $this;

    //顶部
    var $containerTop = $appConfig.find('div[id="' + row.id + '"][class="gray-config-container-top"]');

    //服务信息
    var $serviceInfo = $appConfig.find("#service-info");

    //授权信息
    var $license = $appConfig.find(".license-info-gray");
    var authGrid = $license.find('#license-info-table');

    //流程参数
    var $paramInfo = $appConfig.find(".flowparam-info");
    var paramGrid = $paramInfo.find('#gray-flowparam-info-table');

    //请求参数
    var $requestInfo = $appConfig.find(".request-info-gray");
    var requestGrid = $requestInfo.find('#requests-info-table-gray');

    //相应参数
    var $responseInfo = $appConfig.find(".response-info-gray");
    var responseGrid = $responseInfo.find('#response-info-table-gray');

    var getFlowArray = function () {

        return resPar.filter(function (v) {
            if (v == null || v.paramName == "system.appId") {
                return false;
            } else if (v.$configResources$ == null) {
                return true;
            }
        });
    };

    //流程参数
    var flowArray = getFlowArray();

    var constFlowParams = TempoMineUtils.getConstFlowParams();


    var grayServiceInfo = true;

    /**
     * 初始化页面顶部
     */
    var initContainerTopPage = function () {
        if (row.type == "gray") {
            if (row.status == "1") {
                $containerTop.find('a.start-button').text(TempoUtils.locale("mine.jinyong"));
                $('.tempo-ai-app-rightzone-mid-right-info-gray span[id="gray_service_status"]').text(TempoUtils.locale("mine.qiyong"));
                //成果管理下灰度服务状态更改
                $('.rs-right-mid-gray span[id="ca-status-gray"]').text(TempoUtils.locale("mine.qiyong"));
            } else if(row.status == "0"){
                $containerTop.find('a.start-button').text(TempoUtils.locale("mine.qiyong"));
                $('.tempo-ai-app-rightzone-mid-right-info-gray span[id="gray_service_status"]').text(TempoUtils.locale("mine.jinyong"));
                $('.rs-right-mid-gray span[id="ca-status-gray"]').text(TempoUtils.locale("mine.jinyong"));
            }
        }
    };

    $containerTop.find('a.start-button').button({
        click: function () {
            if("启用" == $containerTop.find('a.start-button').text()){
                if(!flagSync1){
                    $("<div/>").alert({
                        msg: TempoUtils.locale("mine.sync1"),
                        height: 180,
                        width: 400,
                    });
                    return;
                }
                if(!flagSync2){
                    $("<div/>").alert({
                        msg: TempoUtils.locale("mine.sync2"),
                        height: 180,
                        width: 400,
                    });
                    return;
                }
            }
            if(!grayServiceInfo){
                $("<div/>").alert({
                    msg: TempoUtils.locale("mine.gray"),
                    height: 180,
                    width: 400,
                });
                return;
            }
            var progressbar = $("<div/>").tempoprogressbar();
            $.ajax({
                url: contextPath + '/api/ai/mine/gray/start-or-stop-gray-service',
                method: 'POST',
                data: {
                    id: row.id,
                    status: row.status
                },
                success: function(data) {
                    if(data && data.data){
                        if(data.data.status == "0"){
                            $containerTop.find('a.start-button').text(TempoUtils.locale("mine.qiyong"));
                        }
                        if(data.data.status == "1"){
                            $containerTop.find('a.start-button').text(TempoUtils.locale("mine.jinyong"));
                        }
                        $('.tempo-ai-app-rightzone-mid-right-info-gray span[id="gray_service_status"]').text(data.message);
                        $('#ca_status_gray').text(data.message);
                        $('.rs-right-mid-gray span[id="ca-status-gray"]').text(data.message);
                        row.status = data.data.status;
                    }
                    progressbar.tempoprogressbar("destroy");
                },
                error:function () {
                    progressbar.tempoprogressbar("destroy");
                }
            })
        }
    });

    /**
     * 绑定页面顶部的事件
     */
    var bindContainerTopEvent = function () {
        if (row.type && row.type != "stream") {

            $containerTop.find('a.start-button').button();
            $containerTop.find('a.download-button').button();
            $containerTop.find('a.test-button').button({
                click: function (e) {
                    var eventName = '';
                    if (row.type == 'gray') {
                        eventName = 'testGrayMutual.mine';
                    }
                    if (eventName) {
                        var func = arguments.callee;
                        var ready = Eventbus.triggerHandler("ready.serviceTest")[0];
                        if (ready) {
                            Eventbus.trigger(eventName, row);
                        } else {
                            console.log("wait for init event. serviceTest");
                            setTimeout(func, 200);
                        }
                    }
                }
            });
            var aa = "<el-dropdown>\n" +
                "<a href=\"javascript:;void(0)\" onclick=\"return false;\" class='gray-config-button download-button tempo-button ui-button ui-corner-all ui-widget' style=\"width: 72px;\">下载</a>\n" +
                "<el-dropdown-menu slot=\"dropdown\">\n" +
                "<el-dropdown-item v-for=\"item in items[type]\" :key=\"item.id\" :divided=\"item.divided\">\n" +
                "<el-button type=\"text\" @click=\"download(item.url, item.data)\" v-text=\"item.name\" style=\"width: 100%; height: 100%; text-align: left\"></el-button>\n" +
                "</el-dropdown-item>\n" +
                "</el-dropdown-menu>\n" +
                "</el-dropdown>";

            if ($containerTop.find("#gray-config-download") && $containerTop.find("#gray-config-download").length > 0) {
                $containerTop.find("#gray-config-download").empty();
                $containerTop.find("#gray-config-download").html(aa);
                Vue.use(httpVueLoader);
                new Vue({
                    el: '#gray-config-download',
                    data: function () {
                        return {
                            type: window.row.type,
                            items: {
                                gray: [
                                    {
                                        id: "sdk",
                                        name: "SDK",
                                        divided: false,
                                        url: contextPath + '/api/ai/mine/sync/sdk',
                                        data: {
                                            id: row.id
                                        }
                                    },
                                    {
                                        id: "javaCode",
                                        name: "Java示例代码",
                                        divided: false,
                                        url: contextPath + '/api/ai/mine/gray/clientcode',
                                        data: {
                                            id: row.id
                                        }
                                    },
                                    {
                                        id: "jsCode",
                                        name: "JS示例代码",
                                        divided: true,
                                        url: contextPath + '/api/ai/mine/gray/jscode',
                                        data: {
                                            id: row.id
                                        }
                                    },
                                    {
                                        id: "pythonCode",
                                        name: "Python示例代码",
                                        divided: true,
                                        url: contextPath + '/api/ai/mine/gray/pycode',
                                        data: {
                                            id: row.id
                                        }
                                    },
                                ],
                                stream: 'none'
                            }
                        }
                    },
                    methods: {
                        /**
                         * 下载
                         */
                        download: function (url, data) {
                            TempoUtils.download({
                                url: url,
                                data: data
                            });
                        }
                    }
                });
            }
        }
    };

    /**
     * 初始化页面顶部
     */
    var initContainerTop = function () {
        initContainerTopPage();
        bindContainerTopEvent();
    };

    /**
     * 初始化服务配置页面
     * @param rowData
     */
    var initServiceInfoPage = function (rowData) {
        if(rowData.service2Id != null || rowData.service2Id != ""){
            //请求同步服务1状态
            $.postForm({
                url: contextPath + '/api/ai/app/model/status/' + rowData.service1Id,
                success: function (rp) {
                }
            });
            //请求同步服务2状态
            $.postForm({
                url: contextPath + '/api/ai/app/model/status/' + rowData.service2Id,
                success: function (rp) {
                }
            });

        }else {
            //请求同步服务1状态
            $.postForm({
                url: contextPath + '/api/ai/app/model/status/' + rowData.service1Id,
                success: function (rp) {
                }
            });
        }
        var tempoBaseUrl = urlPrefix + "/ai/webapi/model/gray/";
        var html = "<el-form style=\"background-color:#ffffff;border-color:#ffffff\" ref=\"grayConfigRef\" :model=\"grayConfigForm\" :rules=\"grayConfigRule\" label-width=\"100px\" label-position=\"right\">\n" +
            "                            <el-row>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("aiview.app_name")+"\" prop=\"name\">\n" +
            "                                        <el-input id='gray-service-config-app-name' :disabled=\"!isEdit\" v-model.trim=\"grayConfigForm.name\" placeholder=\""+TempoUtils.locale("aiview.input_service_name")+"\" clearable=\"\"></el-input>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("mine.fwbm")+"\" prop=\"describe\">\n" +
            "\n" +
            "                                        <el-input @change=\"getDescribe(grayConfigForm.describe)\" v-if=\"isEdit\" :disabled=\"!isEdit\" v-model.trim=\"grayConfigForm.describe\" clearable=\"\"></el-input>\n" +
            "                                        <span v-if=\"!isEdit &amp;&amp; grayConfigForm.describe==''\">"+TempoUtils.locale("aiview.alias")+"</span>\n" +
            "                                        <span v-if=\"!isEdit && grayConfigForm.describe!='' && grayConfigForm.describe.length <= 20\">{{grayConfigForm.describe}}</span>" +
            "                                        <span id='describeTitle' v-if=\"!isEdit && grayConfigForm.describe!='' && grayConfigForm.describe.length > 20\">{{grayConfigForm.describe.substring(0,20)}}...</span>" +
            "                                        <span class='gray-key-copy-btn' style=\"position: absolute;\" @click='loadAlias(grayConfigForm.describe)' v-if=\"!isEdit &amp;&amp; grayConfigForm.describe!=''\">["+TempoUtils.locale("aiview.djfz")+"]</span>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                            </el-row>\n" +
            "\n" +
            "                            <el-row>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("aiview.syncService1")+"\" prop=\"serviceName1\">\n" +
            "                                        <el-cascader id='gray-sync1-name' style='width: 100%' title=\""+row.service1Name+"\" :disabled=\"!isEdit\" @change=\"getSameMessage1(grayConfigForm.serviceName1)\" :options=\"syncFlowOptions\" :props=\"syncFlowProps\" v-model.trim=\"grayConfigForm.serviceName1\">" +
            "                                           <template slot-scope=\"scope\">\n" +
            "                                               <span :title=\"scope.data.NAME\">{{scope.data.NAME}}</span>\n" +
            "                                           </template>" +
            "                                        </el-cascader>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("aiview.syncService2")+"\" prop=\"serviceName2\">\n" +
            "                                        <el-cascader id='gray-sync2-name' style='width: 100%' title=\""+row.service2Name+"\" clearable=\"\" :disabled=\"!isEdit\" @change=\"getSameMessage2(grayConfigForm.serviceName2)\" :options=\"syncFlowOptions\" :props=\"syncFlowProps\" v-model.trim=\"grayConfigForm.serviceName2\">" +
            "                                        <template slot-scope=\"scope\">\n" +
            "                                               <span :title=\"scope.data.NAME\">{{scope.data.NAME}}</span>\n" +
            "                                        </template>" +
            "                                        </el-cascader>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                            </el-row>\n" +
            "\n" +
            "                            <el-row>\n" +
            "                                <el-col style='width: 100%' :span=\"20\">\n" +
            "                                <el-form-item label=\""+TempoUtils.locale("aiview.publishType")+"\" prop=\"publishType\">\n" +
            "                                    <el-input :disabled=\"true\" v-if=\"!isEdit\" title=\""+row.releaseStrategy+"\" v-model.trim=\"releaseStrategy\" clearable=\"\"></el-input>\n" +
            "                                    <div v-else=\"\">\n" +
            "                                        <el-select :style=\"{ width: '100px' }\" v-model=\"grayConfigForm.publishType\">\n" +
            "                                            <el-option label=\""+TempoUtils.locale("aiview.flow_segmentation")+"\" value=\"0\"></el-option>\n" +
            "                                            <el-option label=\""+TempoUtils.locale("aiview.the_specified_service")+"\" value=\"1\"></el-option>\n" +
            "                                        </el-select>\n" +
            "                                        <template v-if=\"grayConfigForm.publishType==0\">\n" +
            "                                            <span>"+TempoUtils.locale("aiview.syncService1")+"</span>\n" +
            "                                            <el-input @input=\"handleChange1\" :style=\"{ width: '60px'}\" v-model=\"grayConfigForm.serviceValue1\"></el-input>\n" +
            "                                            <span>"+TempoUtils.locale("aiview.syncService2")+"</span>\n" +
            "                                            <el-input @input=\"handleChange2\" :style=\"{ width: '60px'}\" v-model=\"grayConfigForm.serviceValue2\"></el-input>\n" +
            "                                        </template>\n" +
            "                                        <template v-if=\"grayConfigForm.publishType==1\">\n" +
            "                                            <el-radio v-model=\"grayConfigForm.selectValue\" label=\"0\">"+TempoUtils.locale("aiview.syncService1")+"</el-radio>\n" +
            "                                            <el-radio v-model=\"grayConfigForm.selectValue\" label=\"1\">"+TempoUtils.locale("aiview.syncService2")+"</el-radio>\n" +
            "                                        </template>\n" +
            "                                    </div>\n" +
            "                                </el-form-item>\n" +
            "                                </el-col>\n" +
            "                            </el-row>\n" +
            "\n" +
            "                            <el-row>\n" +

            "                                <el-col style='width:490px;' :span=\"10\">\n" +
            "                                   <el-form-item label=\""+TempoUtils.locale("aiview.service_alias")+"\" >\n" +
            "                                       <div class='tempoBaseUrl-gray' title='"+tempoBaseUrl+"'>"+tempoBaseUrl+"</div>\n" +
            "                                   </el-form-item>\n" +
            "                                </el-col>\n" +
            "                                <el-col style='width: calc(100% - 490px)' :span=\"10\">\n" +
            "                                   <el-form-item prop=\"serviceAddr\" label-width='0px'>\n" +
            "                                       <el-input @change=\"getServiceAddr(grayConfigForm.serviceAddr)\" title=\""+row.serviceAddr+"\" placeholder=\""+TempoUtils.locale("aiview.input_service_alias")+"\" :disabled=\"!isEdit\" v-model.trim=\"grayConfigForm.serviceAddr\" clearable=\"\">\n" +
            "                                       </el-input>\n" +
            "                                   </el-form-item>\n" +
            "                                </el-col>\n" +

            "                            </el-row>\n" +
            "\n" +
            "                            <el-row>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("mine.qqfs")+"\">\n" +
            "                                        <span style=\"font-size: 12px\">RESTful</span>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("mine.qqff")+"\">\n" +
            "                                        <span style=\"font-size: 12px\">POST</span>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                            </el-row>\n" +
            "\n" +
            "                            <el-row>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("mine.qqgs")+"\">\n" +
            "                                        <span style=\"font-size: 12px\">JSON</span>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                                <el-col style='width: 50%' :span=\"10\">\n" +
            "                                    <el-form-item label=\""+TempoUtils.locale("mine.ffgs")+"\">\n" +
            "                                        <span style=\"font-size: 12px\">JSON</span>\n" +
            "                                    </el-form-item>\n" +
            "                                </el-col>\n" +
            "                            </el-row>\n" +
            "                        </el-form>";
        $("#gray-service-config").empty();
        $("#gray-service-config").html(html);
        $("#describeTitle").attr("title", row.serviceAlias);
        $("#gray-service-config").find("#gray-service-config-app-name").attr("title", TempoMineUtils.decodeHTML(row.name));
        $.ajax({
            url : contextPath + '/api/ai/mine/gray/get-sync1-jurisdiction',
            method: 'POST',
            data : {
                workSpaceId : row.workSpaceId,
                flagChengGuo : flagChengGuo,
                serviceId : row.id
            },
            success : function(result) {
                if(!result.success){
                    flagSync1 = false;
                    $("#gray-sync1-name").find("input").prop("placeholder",result.message);
                    $("#gray-sync1-name").find("input").prop("title",result.message);
                }
            }
        });
        $.ajax({
            url : contextPath + '/api/ai/mine/gray/get-sync2-jurisdiction',
            method: 'POST',
            data : {
                workSpaceId : row.workSpaceId,
                flagChengGuo : flagChengGuo,
                serviceId : row.id
            },
            success : function(result) {
                if(!result.success){
                    flagSync2 = false;
                    $("#gray-sync2-name").find("input").prop("placeholder",result.message);
                    $("#gray-sync2-name").find("input").prop("title",result.message);
                }
            }
        });
        window.createMessageInfo = new Vue({
            el: '#gray-service-config',
            data: function () {
                /**
                 * 发布策略自定义校验
                 */
                var checkServiceName1 = function(rule, value, callback) {
                    if(typeof(createMessageInfo.grayConfigForm.serviceName2) !='string' && createMessageInfo.grayConfigForm.serviceName2 != ""){
                        createMessageInfo.grayConfigForm.serviceName2 = createMessageInfo.grayConfigForm.serviceName2[createMessageInfo.grayConfigForm.serviceName2.length-1];
                    }
                    if(typeof(value) !='string'){
                        value = value[value.length-1];
                    }
                    if(value != "" && JSON.stringify(value) == JSON.stringify(createMessageInfo.grayConfigForm.serviceName2)) {
                        callback(new Error(TempoUtils.locale("aiview.sync_service2")));
                    } else if(value == "" && value.length == 0){
                        callback(new Error(TempoUtils.locale("aiview.required")));
                    } else {
                        if(createMessageInfo.oriMetaEquals) {
                            callback();
                        } else {
                            callback(new Error(TempoUtils.locale("aiview.service_yuan_message")));
                        }

                    }
                };
                var checkServiceName2 = function(rule, value, callback) {
                    if(typeof(createMessageInfo.grayConfigForm.serviceName1) != 'string'){
                        createMessageInfo.grayConfigForm.serviceName1 = createMessageInfo.grayConfigForm.serviceName1[createMessageInfo.grayConfigForm.serviceName1.length-1];
                    }

                    if(typeof(value) != 'string' && Array.isArray(value)){
                        value = value[value.length-1];
                    }
                    if(value != "" && JSON.stringify(value) == JSON.stringify(createMessageInfo.grayConfigForm.serviceName1)) {
                        callback(new Error(TempoUtils.locale("aiview.sync_service1")));
                    }else if(value == undefined || value == "" || value.length == 0){
                        createMessageInfo.$refs["grayConfigRef"].clearValidate("serviceName1");
                        createMessageInfo.$refs["grayConfigRef"].clearValidate("serviceName2");
                        createMessageInfo.oriMetaEquals = true;
                        callback();
                    }else {
                        if(createMessageInfo.oriMetaEquals) {
                            callback();
                        } else {
                            callback(new Error(TempoUtils.locale("aiview.service_yuan_message")));
                        }
                    }
                };

                var checkName = function(rule, value, callback) {
                    if(value.length > 60){
                        callback(new Error(TempoUtils.locale("aiview.service_gray_name_length")));
                    }
                    if(createMessageInfo.grayConfigForm.name == "" || createMessageInfo.grayConfigForm.name === null){
                        callback(new Error(TempoUtils.locale("aiview.serviceNameNotNull")));
                    }
                    callback();
                };
                var checkServiceAddr = function(rule, value, callback) {
                    if(value.length > 60){
                        callback(new Error(TempoUtils.locale("aiview.service_gray_name_length")));
                    }
                    if(createMessageInfo.grayConfigForm.serviceAddr == "" || createMessageInfo.grayConfigForm.serviceAddr === null){
                        callback(new Error(TempoUtils.locale("aiview.serviceAliasNotNull")));
                    }
                    var va = createMessageInfo.grayConfigForm.serviceAddr.replace(/[^A-Za-z0-9_]/g,"");
                    if(va == createMessageInfo.grayConfigForm.serviceAddr){
                        callback();
                    }else if(createMessageInfo.grayConfigForm.serviceAddr == ""){
                        createMessageInfo.$refs["grayConfigRef"].clearValidate("serviceAddr");
                        callback();
                    }else {
                        callback(new Error(TempoUtils.locale("aiview.grayAlias")));
                    }
                };
                var checkDescribe = function(rule, value, callback) {
                    if(value.length > 60){
                        callback(new Error(TempoUtils.locale("aiview.service_gray_name_length")));
                    }
                    var va = createMessageInfo.grayConfigForm.describe.replace(/[^A-Za-z0-9_]/g,"");
                    if(va == createMessageInfo.grayConfigForm.describe){
                        callback();
                    }else if(createMessageInfo.grayConfigForm.describe == ""){
                        createMessageInfo.$refs["grayConfigRef"].clearValidate("describe");
                        callback();
                    }else {
                        callback(new Error(TempoUtils.locale("aiview.grayAlias")));
                    }
                };

                return {
                    //发布的同步服务树形数据
                    syncFlowOptions: [],
                    //自定义树形数据
                    syncFlowProps: {
                        value: "ID",
                        label: "NAME",
                        children: "children"
                    },
                    //判断是否编辑状态
                    isEdit:false,
                    releaseStrategy:row.releaseStrategy,
                    grayConfigForm: {
                        name: TempoMineUtils.decodeHTML(row.name),
                        describe:row.serviceAlias,
                        serviceAddr: row.serviceAddr,
                        serviceName1: row.service1Id,
                        serviceName2: row.service2Id,
                        publishType: row.publishType || "0",
                        serviceValue1: row.serviceValue1 || 80,
                        serviceValue2: row.serviceValue2 || 20,
                        selectValue:row.selectValue || "0"
                    },
                    grayConfigRule: {
                        name: [
                            {
                                validator: checkName,
                                trigger: "blur"
                            }
                        ],
                        serviceAddr: [
                            {
                                validator:checkServiceAddr,
                                trigger: "blur"
                            }
                        ],
                        describe: [
                            {
                                validator:checkDescribe,
                                trigger: "blur"
                            }
                        ],
                        serviceName1: [
                            {
                                trigger: 'blur',
                                validator: checkServiceName1
                            }
                        ],
                        serviceName2: [
                            {
                                validator: checkServiceName2,
                                trigger: 'blur'
                            }
                        ],
                    },
                    oriMetaEquals: true,
                }
            },
            methods: {
                /**
                 * 获取同步流程树结构
                 */
                getSyncTree: function () {
                    var _this = this;

                    $.ajax({
                        url: contextPath + '/api/ai/mine/gray/get-all-syncservice',
                        method: 'POST',
                        data: {
                            workSpaceId: row.workSpaceId,
                            flagChengGuo: flagGray
                        },
                        success: function(data) {
                            if(data.success){
                                _this.syncFlowOptions = data.data;
                            }
                        }
                    })
                },
                getDescribe: function(){
                    var _this = this;
                    _this.$refs["grayConfigRef"].validateField("describe");

                },
                getServiceAddr: function(){
                    var _this = this;
                    _this.$refs["grayConfigRef"].validateField("serviceAddr");

                },
                getSameMessage1: function(value){
                    var _this = this;
                    if(typeof(_this.grayConfigForm.serviceName2) !='string'){
                        _this.grayConfigForm.serviceName2 = _this.grayConfigForm.serviceName2[_this.grayConfigForm.serviceName2.length-1];
                    }

                    if(typeof(value) !='string'){
                        value = value[value.length-1];
                    }
                    //改变选中同步服务时清空校验
                    _this.$refs["grayConfigRef"].clearValidate("serviceName1");
                    _this.$refs["grayConfigRef"].validateField("serviceName1");
                    _this.$refs["grayConfigRef"].clearValidate("serviceName2");
                    if(_this.grayConfigForm.serviceName2 != "" && value && value != ""){
                        //选中的两个同步服务元信息是否相同

                        $.ajax({
                            url: contextPath + '/api/ai/mine/gray/get-same-massage',
                            method: 'POST',
                            dataType: 'json',
                            data:{
                                syncService1 : value,
                                syncService2 : _this.grayConfigForm.serviceName2
                            },
                            success: function(data) {
                                if(data.success){
                                    _this.oriMetaEquals = true;
                                    _this.$refs["grayConfigRef"].validateField("serviceName1");
                                    return;
                                }else {
                                    _this.oriMetaEquals = false;
                                    _this.$refs["grayConfigRef"].validateField("serviceName1");
                                }
                            }
                        })
                    }
                },
                getSameMessage2: function(value){
                    var _this = this;
                    if(typeof(_this.grayConfigForm.serviceName1) !='string'){
                        _this.grayConfigForm.serviceName1 = _this.grayConfigForm.serviceName1[_this.grayConfigForm.serviceName1.length-1];
                    }

                    if(typeof(value) !='string'){
                        value = value[value.length-1];
                    }
                    //改变选中同步服务时清空校验
                    _this.$refs["grayConfigRef"].clearValidate("serviceName1");
                    _this.$refs["grayConfigRef"].clearValidate("serviceName2");
                    _this.$refs["grayConfigRef"].validateField("serviceName2");
                    if(_this.grayConfigForm.serviceName1 != "" && value && value != ""){
                        $.ajax({
                            url: contextPath + '/api/ai/mine/gray/get-same-massage',
                            method: 'POST',
                            dataType: 'json',
                            data:{
                                syncService1 : _this.grayConfigForm.serviceName1,
                                syncService2 : value
                            },
                            success: function(data) {
                                if(data.success){
                                    _this.oriMetaEquals = true;
                                    _this.$refs["grayConfigRef"].validateField("serviceName2");
                                    return;
                                }else {
                                    _this.oriMetaEquals = false;
                                    _this.$refs["grayConfigRef"].validateField("serviceName2");
                                }
                            }
                        })
                    }
                },
                handleChange1: function (value) {
                    value=value.replace(/[^0-9]/g,'');
                    var _this = this;
                    if(value == ''){
                        value = 1;
                        _this.grayConfigForm.serviceValue1 = 1;
                    }else {
                        _this.grayConfigForm.serviceValue1 = value;
                    }
                    _this.$nextTick(function () {
                        if(value>=100){
                            _this.grayConfigForm.serviceValue1 = 99;
                            _this.grayConfigForm.serviceValue2 = 1;
                        }else if(value == 0){
                            _this.grayConfigForm.serviceValue1 = 1;
                            _this.grayConfigForm.serviceValue2 = 99;
                        }else {
                            _this.grayConfigForm.serviceValue2 = 100-value;
                        }
                    })
                },
                handleChange2: function (value) {
                    value=value.replace(/[^0-9]/g,'');
                    var _this = this;
                    if(value == ''){
                        value = 1;
                        _this.grayConfigForm.serviceValue2 = 1;
                    }else {
                        _this.grayConfigForm.serviceValue2 = value;
                    }
                    _this.$nextTick(function () {
                        if(value>=100){
                            _this.grayConfigForm.serviceValue2 = 99;
                            _this.grayConfigForm.serviceValue1 = 1;
                        }else if(value == 0){
                            _this.grayConfigForm.serviceValue2 = 1;
                            _this.grayConfigForm.serviceValue1 = 99;
                        }else {
                            _this.grayConfigForm.serviceValue1 = 100-value;
                        }
                    })
                },
                loadAlias:function (value) {
                    copyToClip(urlPrefix + "/ai/webapi/model/alias/gray/" + value);
                }
            },
            mounted: function () {
                this.getSyncTree();
            }
        });
    };

    /**
     * 保存页面后重新渲染
     */
    var configInitSave = function () {
        editStatus.serviceInfo = false;

        var that = $serviceInfo.find('.app-container-left-head-btngroups');
        that.empty();
        $("<span class='ui-icon tempo-ui-icon tempo-ui-icon-rename'></span>").appendTo(that);
        $("<span>" + TempoUtils.locale("mine.publish-btn-edit") + "</span>").appendTo(that);
        that.css("color", "#666");

        bindServiceInfoEvent();
        window.createMessageInfo.isEdit = false;

        if(window.location.href.indexOf("view/outcome") != -1) {
            Eventbus.trigger('updateName.service', updataItem);
        }
    };

    /**
     * 编辑服务配置页面
     */
    var editServiceInfo = function () {

        editStatus.serviceInfo = true;
        grayServiceInfo = false;
        var _this = this;

        //初始保存取消按钮
        $(this).empty();
        $(this).unbind("mouseover").unbind("mouseout").unbind("click");
        var sureBtn = $('<span>' + TempoUtils.locale('mine.save') + '</span>').appendTo($(this));
        sureBtn.css("padding-right", "20px").css("color", "#337BFF");
        var cancleBtn = $('<span>' + TempoUtils.locale('mine.publish-dialog-cancel') + '</span>').appendTo($(this));
        cancleBtn.css("color", "#666");
        $("#spanAlias").hide();


        window.createMessageInfo.isEdit = true;
        sureBtn.unbind('click').bind('click', function (e) {
            var $clickDom = $(_this);
            var access = true;
            window.createMessageInfo.$refs['grayConfigRef'].validate(function(valid) {
                if (!valid){
                    access = false;
                }
            });
            if(!access){
                return;
            }
            grayServiceInfo = true;
            //保存事件
            var rowNew = TempoUtils.clone(row);

            updataItem = rowNew;
            //服务名称
            rowNew.name = window.createMessageInfo.grayConfigForm.name;
            //服务别名
            rowNew.serviceAlias = window.createMessageInfo.grayConfigForm.describe || "";
            rowNew.describe = window.createMessageInfo.grayConfigForm.describe || "";
            //同步服务1
            rowNew.serviceName1 = window.createMessageInfo.grayConfigForm.serviceName1;
            //同步服务2
            rowNew.serviceName2 = window.createMessageInfo.grayConfigForm.serviceName2;
            //发布策略
            rowNew.publishType = window.createMessageInfo.grayConfigForm.publishType;
            rowNew.releaseStrategy = window.createMessageInfo.releaseStrategy;
            //流量切分
            rowNew.serviceValue1 = window.createMessageInfo.grayConfigForm.serviceValue1;
            rowNew.serviceValue2 = window.createMessageInfo.grayConfigForm.serviceValue2;
            //指定服务
            rowNew.selectValue = window.createMessageInfo.grayConfigForm.selectValue;
            //服务地址
            rowNew.serviceAddr = window.createMessageInfo.grayConfigForm.serviceAddr;

            delete rowNew.ignore;
            delete rowNew.flowid;
            delete rowNew.launchState;
            //修改选择同步服务
            if(typeof(rowNew.serviceName1) !='string'){
                rowNew.serviceName1 = rowNew.serviceName1[rowNew.serviceName1.length-1];
            }

            if(typeof(rowNew.serviceName2) !='string'){
                rowNew.serviceName2 = rowNew.serviceName2[rowNew.serviceName2.length-1];
            }
            if(typeof(rowNew.serviceValue1) =='string'){
                rowNew.serviceValue1 = parseInt(rowNew.serviceValue1);
            }
            if(typeof(rowNew.serviceValue2) =='string'){
                rowNew.serviceValue2 = parseInt(rowNew.serviceValue2);
            }
            //修改发布策略
            //流量切分
            if(rowNew.publishType == "0"){
                rowNew.releaseStrategy = TempoUtils.locale("mine.liuliangfuwu") + rowNew.serviceValue1 + "," + TempoUtils.locale("mine.liuliangfuwu2") + rowNew.serviceValue2;
                //流量切分加权轮询
                $.ajax({
                    url : contextPath + '/api/ai/mine/gray/update-sync-value',
                    type : 'post',
                    data : {
                        id: rowNew.id,
                        syncValue1: rowNew.serviceValue1,
                        syncValue2: rowNew.serviceValue2
                    },
                });
            }
            //指定服务
            if(rowNew.publishType == "1"){
                //同步服务1
                if(rowNew.selectValue == "0"){
                    rowNew.releaseStrategy = TempoUtils.locale("mine.zhidingfuwu1");
                }
                //同步服务2
                if(rowNew.selectValue == "1"){
                    rowNew.releaseStrategy = TempoUtils.locale("mine.zhidingfuwu2");
                }
            }
            window.createMessageInfo.releaseStrategy = rowNew.releaseStrategy;
            var progressbar = $("<div/>").tempoprogressbar();
            $.ajax({
                url : contextPath + '/api/ai/mine/publish/update-gray-service',
                type : 'post',
                data : JSON.stringify(rowNew),
                contentType : 'application/json',
                success : function(obj) {
                    //成果管理下灰度服务树
                    if(window.location.href.indexOf("view/outcome") != -1) {
                        $("#ca-name-gray").text(TempoMineUtils.decodeHTML(rowNew.name));
                        Eventbus.trigger("updateGTreeDataById.service", rowNew.id);
                    }
                    if (obj && obj.status) {
                        $("#ca-grayname").text(TempoMineUtils.decodeHTML(rowNew.name));
                        $("#belong_flow_gray").text(TempoMineUtils.decodeHTML(rowNew.name));
                        $("#yuan-service").gtree("updateItemName",rowNew.id,rowNew.name);
                        $('.rs-right-top-gray span[id="ca-name-gray"]').text(rowNew.name);
                        $("#yuan-service").gtree("reloadItem",rowNew.id);
                        $m.loadPage(contextPath + "/api/ai/app/view/grayconfiguration"+"?id="+rowNew.id+"&&flag="+flagGray+"&&t="+TempoUtils.uuid(), $(".task-right-bot-container"));
                        configInitSave.call($clickDom);//保存页面后的重新渲染
                        scrollChange();
                    } else {
                        $("<div/>").alert({
                            msg: TempoUtils.locale("mine.publish-savefailed") + obj.error,
                            height: 180,
                            width: 400
                        });
                    }
                    progressbar.tempoprogressbar("destroy");
                },
                error:function () {
                    progressbar.tempoprogressbar("destroy");
                }
            });
        });

        cancleBtn.unbind('click').bind('click', function (e) {
            grayServiceInfo = true;
            window.createMessageInfo.$refs['grayConfigRef'].clearValidate();
            window.createMessageInfo.isEdit = false;
            window.createMessageInfo.grayConfigForm.name=TempoMineUtils.decodeHTML(row.name);
            window.createMessageInfo.grayConfigForm.describe=row.serviceAlias;
            window.createMessageInfo.grayConfigForm.serviceName1=row.service1Id;
            window.createMessageInfo.grayConfigForm.serviceName2=row.service2Id;
            window.createMessageInfo.grayConfigForm.publishType=row.publishType;
            window.createMessageInfo.grayConfigForm.serviceAddr=row.serviceAddr;
            if("0" == row.publishType){
                window.createMessageInfo.grayConfigForm.selectValue="0";
            }
            if("1" == row.publishType){
                window.createMessageInfo.grayConfigForm.serviceValue1=80;
                window.createMessageInfo.grayConfigForm.serviceValue2=20;
            }
            editStatus.serviceInfo = false;

            cancleBtn.unbind("mouseover").unbind("mouseout").unbind("click");
            $("#spanAlias").show();
            $(_this).empty();
            $("<span class='ui-icon tempo-ui-icon tempo-ui-icon-rename'></span>").appendTo($(_this));
            $("<span>" + TempoUtils.locale("mine.publish-btn-edit") + "</span>").appendTo($(_this));
            e.stopPropagation();
            bindServiceInfoEvent();
            scrollChange();
        }).unbind("mouseover").bind("mouseover", function (e) {
            cancleBtn.css("color", "#337bff")
        }).unbind("mouseout").bind("mouseout", function (e) {
            cancleBtn.css("color", "#666")
        });
        scrollChange();
    };

    /**
     * 绑定服务信息配置按钮的相关事件
     * mouseover、mouseout、click
     */
    var bindServiceInfoEvent = function () {
        $serviceInfo.find('span.app-container-left-head-btngroups').unbind('mouseover').bind('mouseover', function (e) {
            $(this).attr("style", "color: #337bff");
            $(this).find(".tempo-ui-icon-rename").addClass("tempo-ui-icon-blue");
        }).unbind('mouseout').bind('mouseout', function (e) {
            $(this).attr("style", "color: #666");
            $(this).find(".tempo-ui-icon-rename").removeClass("tempo-ui-icon-blue");
        }).unbind('click').bind('click', function (e) {
            if (!editStatus.serviceInfo) {
                editServiceInfo.call(this);//初始化配置页面
            }
        });
    };

    /**
     * 初始化服务信息页面
     */
    var initServiceInfo = function () {
        initServiceInfoPage(row);
        bindServiceInfoEvent();
    };


    /**
     * 初始化授权信息
     */
    var initLicenseInfoPage = function () {

        authGrid.datagrid({
            datatype: "local",
            pagination: false,
            rowNum: 100000,
            fit: true,
            rownumbers:true,
            colNames: [TempoUtils.locale("mine.xuhao"), TempoUtils.locale("mine.clientName"), "" ,TempoUtils.locale("mine.kehubiaoshi"), TempoUtils.locale("mine.diaoyongma"), "描述", "同步服务1","同步服务2"],
            colModel: [{
                name: 'id',
                index: 'id',
                hidden: true
            }, {
                name: 'name',
                index: 'name',
                sortable: false,
                width:100
            }, {
                name: '',
                index: '',
                sortable: false,
                width:36,
                formatter: function (cellvalue, options, rowObject) {
                    var html = "<i class=\"el-icon-tickets\" title='复制证书信息' onclick='copyToClip(\"{itemInfo}\")' copy-info-id='" + options.rowId + "' style='cursor: pointer; color: #337BFF'></i>";
                    var itemInfo = 'key: ' + rowObject.key + ' secret: ' + rowObject.secret;
                    html = html.replace("{itemInfo}", itemInfo);
                    return html;
                }
            }, {
                name: 'key',
                index: 'key',
                sortable: false
            }, {
                name: 'secret',
                index: 'secret',
                sortable: false
            }, {
                name: 'description',
                index: 'description',
                sortable: false
            }, {
                name: 'syncService1',
                index: 'syncService1',
                sortable: false,
            }, {
                name: 'syncService2',
                index: 'syncService2',
                sortable: false,
            }],
        });

        authGrid.parent().parent().prev().find("#license-info-table_name").bind("click", function () {
            authGrid.parent().parent().css("height", authGrid[0].offsetHeight);
        });

        if (row) {
            $.ajax({
                url: contextPath + "/api/ai/mine/webapi/list-sync-app",
                data: {
                    service1Id: row.service1Id,
                    service2Id: row.service2Id
                },
                async: false,
                success: function (result) {
                    authGrid.datagrid('clearGridData');
                    authGrid.datagrid('addJSONData', result.data);
                }
            })
        }
        $license.find(".ui-jqgrid-resize-ltr").css("display", "none");
        authGrid.parent().parent().css("height", authGrid[0].offsetHeight);
        scrollChange();
    };
    /**
     * 初始化授权信息
     */
    var initLicenseInfo = function () {

        if ("stream" == row.type) {
            $license.remove();
            $that.find(".app-config-container-right").find('a[navTo="#license-info-gray"]').parent().remove();
        } else {
            initLicenseInfoPage();
        }
    };

    var initLicenseMessage = function () {
        $("#gray-sqxx").mouseover(function () {
            if($("#gray-sqxxInfo").length > 0){
                $("#gray-sqxxInfo").show();
            }else {
                var helpInfoHtml = "<div id='gray-sqxxInfo' style='background: rgb(243, 245, 247);position:absolute;position:absolute;width:275px;height:54px;backgroud:#e0e5e5;box-shadow:0px 0px 10px #dae0e9;z-index:1000;padding-top: 10px'>" +
                    "<span style='padding-left:15px;height:20px;display: block'>" + TempoUtils.locale("aiview.gray-sqxx") + "</span>" +
                    "<span style='padding-left:15px;height:20px;display: block'>" + TempoUtils.locale("aiview.gray-sq") + "</span>" +
                    "<span style='padding-left:15px;height:20px;display: block'>" + TempoUtils.locale("aiview.gray-wsq") + "</span></div>";
                $(helpInfoHtml).appendTo($("#gray-sqxx"));
            }
        });
        $("#gray-sqxx").mouseleave(function () {
            $("#gray-sqxxInfo").hide();
        });
    };

    /**
     * 初始化流程参数
     */
    var initFlowParamInfoPage = function () {
        try {
            paramGrid.datagrid("destroy");
        } catch (e) {}
        if($paramInfo.find("#gray-flowparam-info-table").length === 0) {
            paramGrid = $("<table id='gray-flowparam-info-table'/>").appendTo($paramInfo.find(".app-config-flowparam-info-form"));
        }

        paramGrid.datagrid({
            datatype: "local",
            data: flowArray,
            pagination: false,
            rowNum: 100000,
            shrinkToFit: true,
            fit: true,
            colNames: [TempoUtils.locale("mine.canshumingcheng"), TempoUtils.locale("mine.canshuzhi"), TempoUtils.locale("mine.desc"),TempoUtils.locale("mine.canshuzhi"), TempoUtils.locale("mine.desc")],
            colModel: [{
                name: 'paramName',
                index: 'paramName',
                sortable: false
            }, {
                name: 'paramValue1',
                index: 'paramValue1',
                sortable: false,
                formatter: function (cellvalue) {
                    return TempoMineUtils.encodeHTML(constFlowParams[cellvalue] || cellvalue);
                }
            }, {
                name: 'paramDesc1',
                index: 'paramDesc1',
                sortable: false,
            },  {
                name: 'paramValue2',
                index: 'paramValue2',
                sortable: false,
                formatter: function (cellvalue) {
                    return TempoMineUtils.encodeHTML(constFlowParams[cellvalue] || cellvalue);
                }
            }, {
                name: 'paramDesc2',
                index: 'paramDesc2',
                sortable: false,
            }],
            onSelectRow: function (rowId, status, event) {
                $(event.target).parent().removeClass("ui-state-highlight");
            }
        });
        $("#gray-flowparam-info-table").jqGrid("setGroupHeaders",{
            useColSpanStyle:true,
            groupHeaders:[
                {startColumnName:"paramValue1",numberOfColumns:2,titleText:TempoUtils.locale("mine.service_sync_service1")},
                {startColumnName:"paramValue2",numberOfColumns:4,titleText:TempoUtils.locale("mine.service_sync_service2")},
            ]
        });

        $paramInfo.find(".ui-jqgrid-resize-ltr").css("display", "none");
        paramGrid.parent().parent().css("height", paramGrid[0].offsetHeight);
        scrollChange();
    };
    /**
     * 初始化流程参数
     */
    var initFlowParamInfo = function () {
        initFlowParamInfoPage();
        //处理58482bug，多余的dom元素，直接remove
        if ($("#flowparam-info-gray").find("tr[class='ui-jqgrid-labels jqg-third-row-header jqg-second-row-header']").length > 0) {
            $("#flowparam-info-gray").find("tr[class='ui-jqgrid-labels jqg-third-row-header jqg-second-row-header']").remove();
        }
        //火狐浏览器流程参数重复问题修改
        if (TempoUtils.isFirefox()) {
            for (var i = 0; i < flowArray.length; i++) {
                if ($("#gray-flowparam-info-table").find("td[title='" + flowArray[i].paramName +"']").length > 1){
                    $($("#gray-flowparam-info-table").find("td[title='" + flowArray[i].paramName +"']")[0]).parent().remove();
                }
            }
        }
        $("#gray-flowparam-info-table").find("td[aria-describedby=gray-flowparam-info-table_paramName]").css("text-align","center");
        $($("#flowparam-info-gray").find("tr")[1]).find("th[role='columnheader']").css("text-align", "center");
        //表格竖线
        $($("#flowparam-info-gray").find("tr")[1]).find("th[role='columnheader']").css("border", "1px solid #dae0e9");
        $($("#flowparam-info-gray").find("tr")[1]).find("#gray-flowparam-info-table_paramName").css("border", "0px solid #dae0e9");
        $($("#flowparam-info-gray").find("tr")[2]).find("th[role='columnheader']").css("border", "1px solid #dae0e9");
    };

    var initFlowParamMessage = function () {
        $("#gray-lccs").mouseover(function () {
            if($("#gray-lccsInfo").length > 0){
                $("#gray-lccsInfo").show();
            }else {
                var helpInfoHtml = "<div id='gray-lccsInfo' style='background: rgb(243, 245, 247);position:absolute;position:absolute;width:250px;height:13px;backgroud:#e0e5e5;box-shadow:0px 0px 10px #dae0e9;z-index:1000;padding-top: 12px'>" +
                    "<span style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.gray-lccx") + "</span></div>";
                $(helpInfoHtml).appendTo($("#gray-lccs"));
            }
        });
        $("#gray-lccs").mouseleave(function () {
            $("#gray-lccsInfo").hide();
        });
    };


    /**
     * 初始化请求参数页面
     */
    var initRequestInfoPage = function () {
        requestGrid.datagrid({
            datatype: "local",
            pagination: false,
            rowNum: 100000,
            height:200,
            data: REQUEST_PARAMETERS_GRAY,
            shrinkToFit: true,
            fit: true,
            colNames: [ TempoUtils.locale("mine.theme_template_name"), TempoUtils.locale("mine.theme_template_desc")],
            colModel: [{
                name: 'name',
                index: 'name',
                width: '20px',
                sortable: false
            }, {
                name: 'desc',
                index: 'desc',
                sortable: false
            }],
            onSelectRow: function (rowId, status, event) {
                $(event.target).parent().removeClass("ui-state-highlight");
            }
        });
        $requestInfo.find(".ui-jqgrid-resize-ltr").css("display", "none");
        requestGrid.parent().parent().css("height", requestGrid[0].offsetHeight);
        scrollChange();
    };

    var initRequestInfo = function () {
        if ("stream" !== row.type) {
            initRequestInfoPage();
        } else {
            $requestInfo.remove();
            $that.find(".app-config-container-right").find('a[navTo="#request-info-gray"]').parent().remove();
        }
    };

    /**
     * 初始化返回参数页面
     */
    var initResponseInfoPage = function () {
        if ("stream" === row.type) return;
        responseGrid.datagrid({
            datatype: "local",
            pagination: false,
            rowNum: 100000,
            data: RESPONSE_PARAMETERS,
            shrinkToFit: true,
            fit: true,
            colNames: [ TempoUtils.locale("mine.theme_template_name"), TempoUtils.locale("mine.theme_template_desc")],
            colModel: [{
                name: 'name',
                index: 'name',
                width: '20px',
                sortable: false
            }, {
                name: 'desc',
                index: 'desc',
                sortable: false
            }],
            onSelectRow: function (rowId, status, event) {
                $(event.target).parent().removeClass("ui-state-highlight");
            }
        });
        $responseInfo.find(".ui-jqgrid-resize-ltr").css("display", "none");
        responseGrid.parent().parent().css("height", responseGrid[0].offsetHeight);
        scrollChange();
    };

    /**
     * 初始化返回参数页面
     */
    var initResponseInfo = function () {
        if ("stream" !== row.type) {
            initResponseInfoPage();
        } else {
            $responseInfo.remove();
            $that.find(".app-config-container-right").find('a[navTo="#response-info-gray"]').parent().remove();
        }
    };



    /**
     * 适配页面的放大和缩小
     */
    var initResize = function () {
        $(window).resize(function () {
            setTimeout(function () {
                try {
                    var isAccess = false;
                    //授权块缩放
                    if ($that.find('#license-info-table').length === 1) {
                        authGrid.datagrid("resize");
                        authGrid.parent().parent().css("height", authGrid[0].offsetHeight);
                        isAccess = true;
                    }
                    if ($that.find('#gray-flowparam-info-table').length === 1) {
                        paramGrid.datagrid("resize");
                        paramGrid.parent().parent().css("height", paramGrid[0].offsetHeight);
                        isAccess = true;
                    }

                    if ($that.find('#request-info-table').length === 1 && $that.find('#response-info-table').length === 1 && "stream" !== row.type) {
                        requestGrid.datagrid("resize");
                        requestGrid.parent().parent().css("height", requestGrid[0].offsetHeight);

                        responseGrid.datagrid("resize");
                        responseGrid.parent().parent().css("height", responseGrid[0].offsetHeight);
                        isAccess = true;
                    }
                    if (isAccess) scrollChange();
                } catch (e) {
                }
            }, 200);
        });
    };

    /**
     * 监听滚动条移动的位置
     * 1、获取到每一个DIV距离top的高度，
     * 2、计算滚动条的高度，进行比对得出下标
     * 3、点亮右边的按钮
     */
    var scrollChange = function () {
        var $left = $that.find(".gray-config-container-left");
        /**
         * 获取所有模块的数组
         */
        var getHeight = function () {
            var $blocks = $left.find("div[sign=block]");
            var len = $blocks.length;
            var data = [];
            for (var i = 0; i < len; i++) {
                var h = $blocks[i].clientHeight;
                if (i == 0) {
                    data[i] = h;
                } else {
                    data[i] = data[i - 1] + h;
                }
            }
            return data;
        };

        var arrHeight = getHeight();

        var getIndex = function (top) {
            for (var i = 0; i < arrHeight.length; i++) {
                if (top < arrHeight[i]) {
                    return i;
                }
            }
        };
        $left.parent().unbind("scroll").bind("scroll", function () {
            var $ul = $that.find(".gray-config-container-right").find("ul");
            var $liList = $ul.children();
            var len = $liList.length;
            var lis = [];
            for (var i = 0; i < len; i++) {
                if ($liList[i].tagName.toUpperCase() == "LI") {
                    lis.push($liList[i]);
                }
            }
            //根据滚动事件，计算当前应该是哪个模块被激活
            var top = this.scrollTop;
            var index = getIndex(top);
            var liLength = lis.length;
            for (var i = 0; i < liLength; i++) {
                var cls = $(lis[i]).find("a")[0].className;
                if (cls && i != index) {
                    $(lis[i]).find("a").removeClass("light");
                }
                if (i == index) {
                    $(lis[i]).find("a").addClass("light");
                }
            }
        });
    };

    /**
     * 初始化右边列表点击事件，锚点连接
     */
    var initLIInfo = function () {
        var $ul = $that.find(".gray-config-container-right").find("ul");
        $ul.find("a.navItems").unbind("click").bind("click", function (e) {

            var navTo = $(this).attr('navTo');
            var $div = $(navTo);
            var top = $div[0].offsetTop || 0;
            $('.gray-config-container-body').animate({
                'scroll-top': top
            }, 500);
        });
    };

    /***
     * 复制key到剪切板中
     * @param s 需要赋值的内容
     */
    window.copyToClip = function (s) {
        var aux = document.createElement("input");
        aux.setAttribute("value", s);
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
        $("<div/>").alert({msg: TempoUtils.locale('mine.copy_success')});
    };

    /**
     * 初始化
     */
    var init = function () {
        initContainerTop();
        initServiceInfo();
        initLicenseInfo();
        initLicenseMessage();
        initFlowParamInfo();
        initFlowParamMessage();
        initRequestInfo();
        initResponseInfo();
        initResize();
        setTimeout(scrollChange(), 1000);
        initLIInfo();
    };
    //判断浏览器是否为ie浏览器
    var changeSizeOnIe = function (object) {
        if (TempoUtils.isIE()) {
            //解决IE11下复选框过大问题
            object.css("font-size", "10px");
        }
    };

    init();
    changeSizeOnIe($("#gview_license-info-table input.tempo-checkbox+label"));
    if (row.launchState == 'STARTING') {
        $containerTop.find('a.start-button').addClass("ui-state-disabled").attr("disabled", true);
    }
})(jQuery);